<template>
    <div style="max-width: 100%;" class="footer">
        <div>
            <img style="width: 200px;height: 60px;" src="../../public/images/footer-logo.PNG" class="footer-logo" alt="互动编剧">
            <div class="line"></div>
        </div>
        <div class="illustrate-box1">
            <p>
                <em class="emm">抵制不良剧本</em>
                <em class="emm">拒绝盗版剧本</em>
                <em class="emm">注意自我保护</em>
                <em class="emm">谨防上当受骗</em>
                <em class="emm">享受互动编剧</em>
            </p>
        </div>
        <div class="illustrate-box2">
            <p>
                <em class="emm">《幕起云端》全部剧本经由不同作者创作，相关人物、情节、事件均为艺术创作，请阅览者理性辨别虚实；若对本网站剧本产生兴趣，欢迎近一步了解。</em>
            </p>
        </div>
        <div class="illustrate-box3">
            <p>
                <em class="emm">互动编剧</em>
                <em class="emm">服务条款</em>
                <em class="emm">幕起云端隐私保护指引</em>
                <em class="emm">幕起云端客服</em>
                <em class="emm">剧本服务及商务合作</em>
            </p>
        </div>
        <div class="illustrate-box4">
            <p>
                <em>COPYRIGHT ©2024 SCRIPT. ALL RIGHTS RESERVED.</em>
            </p>
        </div>
        <div class="illustrate-box5">
            <p>
                <em class="emm">幕起云端版权所有</em>
                <em>全国文化市场统一举报电话:12318</em>
            </p>
        </div>
    </div>
</template>

<style>
.footer {
    width: 100%;
    height: 300px;
    /* background-color: rgb(42, 36, 36); */
    background-image: url('../../public/images/sy01.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    /* position: fixed; */
    bottom: 0;
    justify-content: center;
    align-items: center;
    transform-origin: 0% 0%;
    display: block;
}
.footer-logo {
    margin-top: 50px;
    margin-left: 50px;
}
.line {  
  border-top: 2px solid #6d6c6c; /* 黑色1px的实线 */
  margin-left: 100px;  
  width: 93%; /* 或者其他你需要的宽度 */  
  margin: 10px 50px; /* 上下外边距，可根据需要调整 */  

}
.illustrate-box1 {
    font: 12px/20px "微软雅黑","宋体";
    text-align: left;
    /* position: absolute; */
    left: 0;
    margin-left: 50px;
    margin-top: -5px;
    width: 600px;
    height: 20px;
    color: #666;

}
 .emm {
    margin-right: 10px;

  }
.illustrate-box2 {
    font: 12px/20px "微软雅黑","宋体";
    text-align: left;
    left: 0;
    margin-left: 50px;
    margin-top: -1px;
    width: 600px;
    height: 40px;
    color: #666;
}
.illustrate-box3 {
    font: 12px/20px "微软雅黑","宋体";
    /* background-color: yellow; */
    text-align: left;
    left: 0;
    margin-left: 700px;
    margin-top: -50px;
    width: 600px;
    height: 20px;
    color: #9a9898;
}
.illustrate-box4 {
    font: 12px/20px "微软雅黑","宋体";
    /* background-color: rgb(61, 181, 179); */
    text-align: left;
    left: 0;
    margin-left: 700px;
    margin-top: -1px;
    width: 600px;
    height: 30px;
    color: #9a9898;
}
.illustrate-box5 {
    font: 12px/20px "微软雅黑","宋体";
    /* background-color: rgb(167, 52, 190); */
    text-align: left;
    left: 0;
    margin-left: 700px;
    margin-top: -10px;
    width: 600px;
    height: 20px;
    color: #9a9898;
}
</style>